@charset "utf-8";
@import "_reset";
$color:#000000;
//总页面
* {
    margin: 0;
    padding: 0;
    font-size: 0;
    box-sizing: border-box;
}

.web {
    width: 6.4rem;
    height: 100%;
    overflow: hidden;
    background-color: #bf0c21;
    background-image: url(../img/shading.png);
    //主场景
    .fieldbox {
        height: 100%;
        overflow: hidden;
        //页面标题
        .hostTitle {
            width: 5rem;
            height: 10%;
            margin: 0 auto;
            text-align: center;
            padding-top: 0.5rem;
            overflow: hidden;
            h3 {
                font-size: 0.3rem;
                color: #e7c598;
            }
        }
        //右角音乐键
        .musicButton {
            .musicLogo {
                width: 0.4rem;
                height: 0.4rem;
                border-radius: 50%;
                background-color: #e7c598;
                position: absolute;
                right: 0.4rem;
                top: 0.4rem;
                text-align: center;
                overflow: hidden;
                i {
                    display: block;
                    font-size: 0.3rem;
                    color: #bf0c21;
                    margin-top: 0.03rem;
                }
            }
            .rotateBtn {
                animation-name: rotateB;
                animation-iteration-count: infinite;
                animation-duration: 2s;
                animation-play-state: running;
                animation-timing-function: linear;
            }
            @keyframes rotateB {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        }
        //酒席区
        .tableArea {
            margin: 0 auto;
            width: 5rem;
            height: 80%;
            background-image: url(../img/shading.png);
            background-color: #bf0c21;
            overflow: auto;
            //主桌区域
            .hostArea {
                height: 28%;
                overflow: auto;
                .hostTable {
                    margin: 0rem auto 0 auto;
                    width: 3rem;
                    height: 2.5rem;
                    position: relative;
                    overflow: hidden;
                    transition-duration: 2s;
                    .table {
                        width: 1.5rem;
                        height: 1.5rem;
                        border-radius: 50%;
                        margin: 0.5rem auto;
                        background-color: #e7c598;
                        text-align: center;
                        overflow: hidden;
                        box-shadow: 0.02rem 0.02rem 0.1rem 0.01rem #000000;
                        p {
                            font-size: 0.3rem;
                            line-height: 0.2rem;
                            margin-top: 0.65rem;
                            color: #bf0c21;
                        }
                    }
                    .chair {
                        width: 0.5rem;
                        height: 0.5rem;
                        border-radius: 50%;
                        background-color: #e7c598;
                        overflow: hidden;
                        position: absolute;
                        box-shadow: 0.01rem 0.01rem 0.1rem 0.01rem #000000;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .chair:nth-child(2) {
                        top: 0.07rem;
                        left: 0.72rem;
                    }
                    .chair:nth-child(3) {
                        top: 0.07rem;
                        right: 0.72rem;
                    }
                    .chair:nth-child(4) {
                        top: 1rem;
                        left: 0.18rem;
                    }
                    .chair:nth-child(5) {
                        top: 1rem;
                        right: 0.18rem;
                    }
                    .chair:nth-child(6) {
                        bottom: 0.07rem;
                        left: 0.72rem;
                    }
                    .chair:nth-child(7) {
                        bottom: 0.07rem;
                        right: 0.72rem;
                    }
                }
            }
            //客桌区域
            .guestArea {
                width: 5rem;
                height: 72%;
                margin-top: 0.2rem;
                .guestTable {
                    width: 2.4rem;
                    height: 2rem;
                    position: relative;
                    overflow: hidden;
                    display: inline-block;
                    transition-duration: 1.5s;
                    margin: 0 0.05rem 0.3rem 0.05rem;
                    .table {
                        width: 1.2rem;
                        height: 1.2rem;
                        margin: 0.4rem auto;
                        overflow: hidden;
                        border-radius: 50%;
                        background-color: #e7c598;
                        text-align: center;
                        box-shadow: 0.02rem 0.02rem 0.1rem 0.01rem #000000;
                        p {
                            font-size: 0.3rem;
                            line-height: 0.16rem;
                            margin-top: 0.5rem;
                            color: #bf0c21;
                        }
                        i{
                            font-size: 1rem;
                            display: block;
                            margin-top: 0.5rem;
                        }
                    }
                    .chair {
                        width: 0.4rem;
                        height: 0.4rem;
                        border-radius: 50%;
                        background-color: #e7c598;
                        text-align: center;
                        overflow: hidden;
                        position: absolute;
                        box-shadow: 0.01rem 0.01rem 0.01rem #000000;
                        animation-iteration-count: infinite;
                        animation-duration: 1.5s;
                        i {
                            display: block;
                            font-size: 0.25rem;
                            line-height: 0.15rem;
                            margin-top: 0.1rem;
                            color: orangered;
                        }
                        img{
                            height: 100%;
                            width: 100%;
                        }
                    }
                    @keyframes chairsJump {
                        25% {
                            transform: rotate(10deg);
                        }
                        50% {
                            transform: scale(1.2) rotate(-10deg);
                        }
                        75% {
                            transform: rotate(10deg);
                        }
                        100% {
                            transform: scale(1) rotate(-10deg);
                        }
                    }
                    .chair:nth-child(2) {
                        top: 0.05rem;
                        left: 0.6rem;
                    }
                    .chair:nth-child(3) {
                        top: 0.05rem;
                        right: 0.6rem;
                    }
                    .chair:nth-child(4) {
                        top: 0.8rem;
                        left: 0.15rem;
                    }
                    .chair:nth-child(5) {
                        top: 0.8rem;
                        right: 0.15rem;
                    }
                    .chair:nth-child(6) {
                        bottom: 0.05rem;
                        left: 0.6rem;
                    }
                    .chair:nth-child(7) {
                        bottom: 0.05rem;
                        right: 0.6rem;
                    }
                }
                .lastTable{
                    .chair{
                        opacity: 0;
                    }
                }
            }
        }
        //底部分享框
        .shareArea {
            height: 10%;
            position: relative;
            width: 6.4rem;
            overflow: hidden;
            .shareLogo {
                width: 3.2rem;
                height: 0.5rem;
                position: absolute;
                bottom: 0.3rem;
                left: 1.6rem;
                animation-iteration-count: infinite;
                animation-duration: 3s;
                span {
                    display: block;
                    width: 2.5rem;
                    height: 0.3rem;
                    position: absolute;
                    top: 0.08rem;
                    left: 0.37rem;
                    font-size: 0.3rem;
                    line-height: 0.3rem;
                    background-color: #bf0c21;
                    color: #e7c598;
                    cursor: pointer;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            //回到主页面按钮
            .indexLogo {
                width: 0.4rem;
                height: 0.4rem;
                border-radius: 50%;
                background-color: #e7c598;
                position: absolute;
                right: 0.4rem;
                bottom: 0.3rem;
                text-align: center;
                overflow: hidden;
                i {
                    display: block;
                    font-size: 0.3rem;
                    color: #bf0c21;
                    margin-top: 0.03rem;
                }
            }
        }
    }
    //载入弹窗
    .loadingbox {
        //      display: none;
        width: 6.4rem;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        background-image: url(../img/shading2.png);
        //糖果
        .sugar {
            position: absolute;
            img {
                position: absolute;
                width: 0.5rem;
                height: 0.6rem;
                animation-name: fallout;
                animation-direction: initial;
                animation-timing-function: linear;
                opacity: 0;
                z-index: 3;
            }
            //糖果下落动画
            @keyframes fallout {
                0% {
                    transform: translateY(0rem) rotate(30deg);
                    opacity: 0;
                }
                25% {
                    transform: translateY(0.75rem) rotate(45deg);
                }
                50% {
                    transform: translateY(2rem) rotate(75deg);
                }
                75% {
                    transform: translateY(4rem) rotate(120deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(7rem) rotate(180deg);
                    opacity: 0;
                }
            }
            img:nth-child(1) {
                top: 0.5rem;
                left: 0.5rem;
                animation-duration: 1.5s;
                animation-delay: 1s;
            }
            img:nth-child(2) {
                top: 0.5rem;
                left: 1.5rem;
                animation-duration: 0.5s;
                animation-delay: 0.5s;
            }
            img:nth-child(3) {
                top: 0.5rem;
                left: 2.5rem;
                animation-duration: 2.5s;
                animation-delay: 0s;
            }
            img:nth-child(4) {
                top: 0.5rem;
                left: 3.5rem;
                animation-duration: 1s;
                animation-delay: 1s;
            }
            img:nth-child(5) {
                top: 0.5rem;
                left: 4.5rem;
                animation-duration: 2s;
                animation-delay: 0.5s;
            }
            img:nth-child(6) {
                top: 0.5rem;
                left: 5.5rem;
                animation-duration: 1.5s;
                animation-delay: 0s;
            }
            img:nth-child(7) {
                top: 1.5rem;
                left: 1rem;
                animation-duration: 2.5s;
                animation-delay: 1s;
            }
            img:nth-child(8) {
                top: 1.5rem;
                left: 2rem;
                animation-duration: 2.5s;
                animation-delay: 0.5s;
            }
            img:nth-child(9) {
                top: 1.5rem;
                left: 3rem;
                animation-duration: 1.5s;
                animation-delay: 0s;
            }
            img:nth-child(10) {
                top: 1.5rem;
                left: 4rem;
                animation-duration: 1s;
                animation-delay: 1s;
            }
            img:nth-child(11) {
                top: 1.5rem;
                left: 5rem;
                animation-duration: 1.5s;
                animation-delay: 0.5s;
            }
            img:nth-child(12) {
                top: 1rem;
                left: 0.75rem;
                animation-duration: 2s;
                animation-delay: 0s;
            }
            img:nth-child(13) {
                top: 1rem;
                left: 1.25rem;
                animation-duration: 1.5s;
                animation-delay: 1s;
            }
            img:nth-child(14) {
                top: 1rem;
                left: 1.75rem;
                animation-duration: 1s;
                animation-delay: 0.5s;
            }
            img:nth-child(15) {
                top: 1rem;
                left: 2.25rem;
                animation-duration: 2.5s;
                animation-delay: 0s;
            }
            img:nth-child(16) {
                top: 1rem;
                left: 2.75rem;
                animation-duration: 2s;
                animation-delay: 1s;
            }
            img:nth-child(17) {
                top: 1rem;
                left: 3.25rem;
                animation-duration: 2s;
                animation-delay: 0.5s;
            }
            img:nth-child(18) {
                top: 1rem;
                left: 3.75rem;
                animation-duration: 1s;
                animation-delay: 0s;
            }
            img:nth-child(19) {
                top: 1rem;
                left: 4.25rem;
                animation-duration: 2s;
                animation-delay: 1s;
            }
            img:nth-child(20) {
                top: 1rem;
                left: 4.75rem;
                animation-duration: 2.5s;
                animation-delay: 0.5s;
            }
            img:nth-child(21) {
                top: 1rem;
                left: 5.25rem;
                animation-duration: 1s;
                animation-delay: 0s;
            }
        }
        //初始弹窗样式
        .popupWindow {
            width: 4.2rem;
            height: 2.5rem;
            background-color: #e7c598;
            border-radius: 0.1rem;
            overflow: hidden;
            position: absolute;
            left: 1.1rem;
            top: 30%;
            animation-delay: 1s;
            .title {
                width: 2.22rem;
                height: 0.4rem;
                margin: 0.2rem auto;
                text-align: center;
                overflow: hidden;
                p {
                    color: #bf0c21;
                    font-size: 0.2rem;
                    line-height: 0.2rem;
                    margin-top: 0.1rem;
                }
            }
            .chooseSeat,
            .rank,
            .application {
                background-color: #bf0c21;
                width: 2.22rem;
                height: 0.4rem;
                border-radius: 0.08rem;
                margin: 0.13rem auto;
                text-align: center;
                cursor: pointer;
                overflow: hidden;
                a {
                    display: block;
                    color: #e7c598;
                    font-size: 0.2rem;
                    line-height: 0.2rem;
                    margin-top: 0.1rem;
                }
                p {
                    color: #e7c598;
                    font-size: 0.2rem;
                    line-height: 0.2rem;
                    margin-top: 0.1rem;
                }
            }
            //关闭按钮
            .closePopup {
                width: 0.36rem;
                height: 0.36rem;
                border-radius: 50%;
                background-color: #bf0c21;
                position: absolute;
                top: 0.15rem;
                right: 0.2rem;
                cursor: pointer;
                i {
                    color: #e7c598;
                    display: block;
                    font-size: 0.2rem;
                    text-align: center;
                    margin-top: 0.07rem;
                }
            }
        }
    }
    //分享弹窗
    .sharebox {
        z-index: 100;
        display: none;
        background-image: url(../img/shading2.png);
        width: 6.4rem;
        height: 100%;
        position: absolute;
        top: 0;
        //分享弹窗
        .popupWindow2 {
            width: 4.2rem;
            height: 2.5rem;
            background-color: #e7c598;
            border-radius: 0.1rem;
            overflow: hidden;
            position: absolute;
            left: 1.1rem;
            top: 30%;
            p {
                text-align: center;
                margin-top: 1.1rem;
                font-size: 0.3rem;
                color: #bf0c21;
            }
            //关闭按钮
            .closePopup {
                width: 0.36rem;
                height: 0.36rem;
                border-radius: 50%;
                background-color: #bf0c21;
                position: absolute;
                top: 0.15rem;
                right: 0.2rem;
                cursor: pointer;
                i {
                    color: #e7c598;
                    display: block;
                    font-size: 0.2rem;
                    text-align: center;
                    margin-top: 0.07rem;
                }
            }
        }
    }
}